Vue3 Computed Properties & Watchers

vue學習筆記

yenchenjulia 2024-02-02 19:22:09 ‧ 1131 瀏覽

分享至

前言
這禮拜被這兩個搞得暈頭轉向，因為是有樣學樣，不是扎實的學術派，所以一開始我只會到處watch，但在向別人提問後，不只1人說你這應該用computed比較好喔！我開始好奇這兩個到底有什麼不同？功能看起來都一樣啊！本來不想直面這個問題，先求能用就好，誰都好，但困擾了好幾天，實在受不了了，決定來快速筆記爬梳一下，看是否有新的收穫？（進度還沒趕完...火燒屁股了只能快速）
結果寫了一大篇好像廢話的東西，覺得毫無所獲，很不滿意，坐在位子上發呆，想著這週可能發不出文來了，於是轉頭問了旁邊的同學這個問題，突然茅塞頓開，果斷按了delete，至於如何實作跟舉例，建議大家去看官網，會比看我寫的文章好很多，就不贅述，也姑且不深究底層如何處理，因為我能力不足XD。決定以另外一種方式來表達，如果把這兩個東西擬人化，當成我的朋友的話，角色設定如下：
Computed Properties: 是個極其平凡的正常普通人，生活穩定，遇到事情就是以過去經驗來處理，發現事情似乎無法類比過去經驗時，才會重新思考該如何作反應，簡而言之，輸入有變動，才會重新輸出，輸入無變動，直接提取經驗，傾向用快思慢想中快思那端處理大部分事物，所以處理的事情也相對單純。
Watcher: 是個極度神經質的會計師，中心思想就是數據一定有錯，以這個大前提來看待所有財務報表，就算暫時找不出任何錯誤，他還是會一直鑽牛角尖不間斷地持續監聽，這種病態的執著，讓他經常處於焦慮狀態超級耗能，雖然因此壓力山大，卻也同時得以在會計領域表現傑出，佔有一席之地，沒有困難的問題難得了他。
用很簡單的方法來證明兩個人的個性，我在computed跟watch裡放了一模一樣的程式碼，再用console.log印出字樣，實際看他們各自執行的次數。在我什麼都沒動的情況下，watch就硬生生的多了兩次。
所以如果你有這兩個朋友，一般來說，若不是什麼非常重大或困難的問題，你應該不會想要請求Ｗatcher的協助吧！與其向他請教徒增困擾，不如詢問Computed Properties會讓事情簡單許多。但真的天要塌下來的時候，投靠Watcher會是更明智的選擇。
結論
希望透過這樣的形容，提供跟我一樣對於他們傻傻分不清楚的新手菜鳥一些畫面，比較容易記憶，未來在選擇該用什麼方式實作時，有更明確的方向。